<script>
import { defineComponent } from "vue";
import pageData from "@/assets/js/pageData";

export default defineComponent({
  name: "numScreen",
  data() {
    return {
      routeMap : {
        '/breakPage': [271, 272,273,274,275,276],
        '/zhubian':['1zb','2zb'],
        "/page-110kV":[173]
      }
    };
  },
  props: {
    dir: {
      type: String,
      default: 'top',
      validator(value) {
        return ['top', 'bottom', 'none'].includes(value)
      }},
    name: {
      type: String
    },
    P: {
      default: 0
    },
    Q:{
      default: 0.00
    },
    Ia:{
      default: 0.00
    },
    path: {
      type: String
    },
    ft_num: {
      type: String
    },
    textWidth: {
      type: String,
      default: "100"
    },
    ftCode: {
      type: [String,Number]
    }
  },
  methods: {
    jump() {
      const path = Object.keys(this.routeMap).find(key =>
        this.routeMap[key].includes(this.ftCode)
      )
      if (!path) {
        console.warn('未找到匹配路径')
        return
      }
      const data=pageData.find(item=>item.ftCode==this.ftCode)
      this.$router.push({
        path,
        query: {
          ftIndex: data.ftIndex,
          jgName: data.jgName,
          ftName: data.ftName
        }
      })
    }
  },
});
</script>

<template>
  <svg>
    <g @click="jump" style="cursor: pointer" transform="translate(0,60)">
      <rect x='100' y="5" :width="textWidth" height="24" style="stroke:#fff;fill: transparent;stroke-width: 3"/>
      <text
        :x="100 + textWidth / 2"
        y="22"
        text-anchor="middle"
        style="fill: #fff; font-size: 14px;font-family: '宋体';font-weight: 100"
        stroke="#79dee9"
      >
        {{ name }}
      </text>
    </g>
    <g transform="translate(-55,0)" v-if="dir!=='none'&&dir!=='bottom'">
      <text x="190" y="17" style="fill: rgb(242, 176, 92);font-size: 14px;font-weight: bolder" >{{Number(P).toFixed(2)}}</text>
      <text x="190" y="37" style="fill: rgb(149, 141, 222);font-size: 14px;font-weight: bolder">{{Number(Q).toFixed(2)}}</text>
      <text x="190" y="57" style="fill: #93f958;font-size: 14px;font-weight: bolder">{{Number(Ia).toFixed(2)}}</text>
    </g>
    <g transform="translate(-55,90)" v-if="dir==='bottom'">
      <text x="190" y="17" style="fill: rgb(242, 176, 92);font-size: 14px;font-weight: bolder" >{{Number(P).toFixed(2)}}</text>
      <text x="190" y="37" style="fill: rgb(149, 141, 222);font-size: 14px;font-weight: bolder">{{Number(Q).toFixed(2)}}</text>
      <text x="190" y="57" style="fill: #93f958;font-size: 14px;font-weight: bolder">{{Number(Ia).toFixed(2)}}</text>
    </g>

  </svg>

</template>

<style scoped lang="less">

</style>
